<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onTableRefresh('user_name')">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search" @reset="changeBiz">
						<!-- <cl-filter label="账号">
							<cl-select
								v-model="search.account_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
								style="width: 160px"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter> -->
						<cl-filter label="子账户">
							<el-input
								v-model="search.advertiser_id"
								placeholder="请填写子账户ID"
								style="width: 160px"
								@change="refresh"
								clearable
							/>
						</cl-filter>
						<cl-filter label="城市">
							<el-input
								v-model="search.city"
								placeholder="请填写城市名称"
								style="width: 160px"
								@change="refresh"
								clearable
							/>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 210px"
								@change="refresh"
							/>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<cl-table-handle
						:print="printParams"
						:columns="initColumns"
						v-model="table.columns"
						@export-file="exportFile"
					/>
				</el-row>
			</template>
			<el-row>
				<!-- 数据表格 -->
				<cl-table v-bind="table" id="collectList">
					<cl-empty slot="empty" />
				</cl-table>
			</el-row>
			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<cl-pagination />
				</el-row>
			</template>
		</cl-pagefull>
	</cl-crud>
</template>
<script>
	import { exportExcel } from "@/utils/excel";
	import { cloneDeep } from "cl-admin/utils";
	import { delEmptyChildren } from "@/utils";
	import dayjs from "dayjs";

	const payTypeMap = {
		ali: "支付宝",
		wechat: "微信",
		other: "其它"
	};

	const otherMap = {
		consignee_name: "收货人",
		consignee_tel: "收货人手机号",
		region_str: "预约地区",
		appoint_date: "预到店时间"
	};
	export default {
		data() {
			return {
				otherMap,
				printParams: {
					id: "citycost",
					popTitle: "城市消耗"
				},
				// 表格配置
				table: {
					"context-menu": ["refresh"],
					columns: []
				},
				initColumns: [
					{
						type: "index",
						label: "#",
						align: "center",
						width: 50,
						fixed: true,
						disable: true
					},
					{
						label: "子账号名称",
						prop: "adv_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "子账号ID",
						prop: "advertiser_id",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "日期",
						prop: "start_date",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "省份",
						prop: "province_name",
						minWidth: 120
					},
					{
						label: "城市",
						prop: "city_name",
						minWidth: 120
					},
					{
						label: "总花费",
						prop: "cost",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "转化",
						prop: "convert",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "转化成本",
						prop: "convert_cost",
						minWidth: 120
					},
					{ 
						label: "展示数", 
						prop: "show", 
						minWidth: 140 
					},
					{ 
						label: "平均千次展示花费", 
						prop: "avg_show_cost", 
						minWidth: 140 
					},
					{
						label: "点击数",
						prop: "click",
						minWidth: 200,
					},
					{ label: "平均点击单价", prop: "avg_click_cost", width: 120 },
				],
				search: {
					account_id: "",
					advertiser_id: "",
					date: [
						dayjs().startOf("day").format("YYYY-MM-DD"),
						dayjs().endOf("day").format("YYYY-MM-DD")
					],
					city: "",
				}
			};
		},
		created() {
			this.table.columns = cloneDeep(this.initColumns);
		},
		methods: {
			onLoad({ ctx, app }) {
				ctx.service(this.$service.oceanengine)
					.set("dict", {
						// 请求
						api: {
							page: "cityCostReport"
						}
					})
					.done();
				app.refresh(this.search);
			},
			// crud刷新
			refresh() {
				this.$refs.crud.refresh({ page: 1, ...this.search });
			},
			// 导出EXCEl
			exportFile() {
				exportExcel("#collectList");
			}
		}
	};
</script>
